import React from 'react';
import styles from './Menubar.css';

import MenuList from  '../MenuList/MenuList';
class Menubar extends React.Component{
    constructor(){
        super();
        this.state={
            dataSoure:[
                {imgSrc:'./public/img/sjgl.png',menutext:'书籍管理'},
                {imgSrc:'./public/img/dzgl.png',menutext:'学生管理'},
                {imgSrc:'./public/img/jscx.png',menutext:'借阅管理'},
                {imgSrc:'./public/img/cs.png',menutext:'超期管理'},
                {imgSrc:'./public/img/cs.png',menutext:'罚款管理'},
                {imgSrc:'./public/img/tscx.png',menutext:'图书清算'},
                {imgSrc:'./public/img/tscx.png',menutext:'管理员管理'},
                {imgSrc:'./public/img/cxr.png',menutext:'意见反馈'},
            ]
        }
    }
    render(){
        let {btnClick,todos}=this.props;
        return(
            <ul className={styles.root}>
                {
                    this.state.dataSoure.map(function (currentValue,index) {
                       return(
                           <MenuList key={index} {...currentValue}
                                     isActive={todos.id===index?todos.isdisplay:false}
                                     onClick={()=>btnClick(index)}/>
                       )
                    })
                }

            </ul>
        )
    }
}

export  default Menubar;
